<template>
  <div class="showcar-content">
    <my-header ischeck="showcar"></my-header>
    <div class='payfor' v-if="ispay==true">
    <div class="icon">
       <span> </span><span>总金额: </span><img  @click='showPay(false)' src="../../public/关闭2.png" alt="">
    </div>
    <span style="color: red;font-size: larger;font-weight: bold;">￥{{allprice}}</span>
    <span style="margin-left: -10rem;">支付方式：</span>
      <template>
        <el-radio v-model="radio" label="1">支付宝</el-radio>
        <el-radio v-model="radio" label="2">微信</el-radio>
        <el-radio v-model="radio" label="3">银行卡</el-radio>
      </template>
      <div>
      <el-button type="info">取消支付</el-button>
      <el-button type="success">确认支付</el-button></div>
    </div>
    <div class="table">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="lname" label="商品名称" width="200">
        </el-table-column>
        <el-table-column prop="limg" label="商品图片" show-overflow-tooltip class="shopImg">
          <template v-slot="scope">
            <img :src="'http://127.0.0.1:3000/'+scope.row.limg" alt="" width="160" height="90">
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品单价" width="80">
        </el-table-column>
        <el-table-column prop="count" label="商品数量" width="80">
        </el-table-column>
        <!-- 增加减少商品 -->
        <el-table-column label="操作" width="120">
          <template slot-scope="scope" class="updataButton">
            <el-button size="mini" @click="shopUpdate(scope.$index, scope.row ,+1)">加一</el-button>
            <el-button size="mini" type="danger" @click="shopUpdate(scope.$index, scope.row , -1)">减一</el-button>
          </template>
        </el-table-column>

        <el-table-column label="商品总价" width="80">
          <template v-slot="scope">
            <span>{{scope.row.price*scope.row.count}}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80">
          <template slot-scope="scope">
            <el-button @click.native.prevent="deleteRow(scope.$index, tableData)" type="text" size="small">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="table-bottom">
        <div style="margin-top: 20px;width: 50%;">
          <!-- <el-button @click="toggleSelection([tableData[1], tableData[2]])">切换第二、第三行的选中状态</el-button> -->
          <el-button @click="toggleSelection()">取消选择</el-button>
          <el-button @click="checkDel()">选中删除</el-button>
        </div>
        <div style="margin-top: 20px">
          <span style="margin-right: 20px">选中总价: <span>￥{{allprice}}</span></span>
          <el-button type="danger" @click='showPay(true)'>支付</el-button>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  import {
    Toast
  } from 'mint-ui';
  export default {
    data() {
      return {
        tableData: [],
        uid: this.$store.state.uid,
        allprice: 0,
        radio:'1',
        ispay:false
      }
    },
    methods: {
      changeShow() {
        let obj = {
          uid: this.uid
        }
        // 显示购物车时发送axios
        this.axios.get('car', {
          params: obj
        }).then(res => {
          console.log(res.data.data)
          this.tableData = res.data.data
        })
      },
      shopUpdate(index, row, n) {
        if (row.count > 0) {
          this.addToCar(row,n)
          console.log(n)
          row.count += n
        }
        if (row.count == 0) {
          this.deleteRow(index,this.tableData)
        }
      },
      //购物车商品删除
      deleteRow(index, rows) {
        // console.log(rows[index].lid)
        // 删除请求
        this.axios.get('/delete', {
          params: {
            lid: rows[index].lid,
            uid: this.$store.state.uid
          }
        }).then(res => {
          console.log(res)
          this.changeShow()
        })
      },
      //添加商品
      addToCar(rows,n) {
        // let num = e.currentTarget.dataset.num
        console.log(rows)
        let row = rows
        let obj ={
            uid : parseInt(this.uid),
            lid: row.lid,
            price: row.price,
            lname: row.lname,
            limg: row.limg,
            n:n
        }
        this.axios('addcar', {
          params:
            obj

        }).then(result => {
          if (result.data.code == 1) {
            Toast('操作成功');
          } else {
            Toast('操作失败');
          }
        })
      },
      //表格按钮系列功能
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        // 每次调用前先清空 防止无限累加
        this.allprice = 0
        //用来确定选中的按钮
        this.multipleSelection = val;
        //遍历选中按钮
        this.multipleSelection.forEach(selectedItem => {
          this.allprice += selectedItem.count * selectedItem.price
          return this.allprice
        })
      },
      checkDel() {
        this.multipleSelection.forEach(selectedItem => {
          // 删除请求
          this.axios.get('/delete', {
            params: {
              lid: selectedItem.lid,
              uid: this.$store.state.uid
            }
          }).then(res => {
            console.log(res)
            this.changeShow()
          })
        })
      },
      //显示支付界面
      showPay(boolean){
        this.ispay = boolean
        console.log(boolean)
      }
    },
    computed: {

    },
    created() {
      this.changeShow()
    }
  }
</script>

<style>
  .showcar-content{
    position: relative;
  }
  .table {
    padding: 1rem;
    margin: 1rem;
    border: #909399 solid 0.0625rem;
  }

  .el-table .cell.el-tooltip,
  .table-bottom,.payfor,.payfor .icon{
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .table-bottom,.payfor,.payfor .icon {
    justify-content: space-between;
  }

  .el-button+.el-button {
    margin-left: 0;
  }

  .cell {
    text-align: center;
  }
  .payfor{
    background-color: white;
    width: 25rem;
    height:30rem;
    position: fixed;
    z-index: 999;
    left: 35%;
    top: 20%;
    border: solid black 0.0625rem;
    border-radius: 0.625rem;
    flex-direction: column;
    padding: 1.875rem;
  }
  .payfor .icon{
    width: 100%;
  }
  .payfor .icon img{
    width: 1.5rem;
    height: 1.5rem;
  }
  .payfor .icon img:hover{
    cursor: pointer;
  }
</style>
